<script setup>
import router from "@/router/index.js";
import headComponents from "@/components/headComponents.vue";
import { ref } from "vue";
// 图片路径列表
import img1 from "@/Img/img/mainpage/7.jpg";
import img2 from "@/Img/img/mainpage/8.jpg";
import img3 from "@/Img/img/mainpage/9.jpg";

const carouselImages = [
  { src: img1 },
  { src: img2 },
  { src: img3 }
];

// PDF 模态框控制
const pdfModalVisible = ref(false);
const pdfUrl = ref("");

// 打开 PDF 模态框的方法（可绑定到某个按钮）
const openPdfModal = (url) => {
  pdfUrl.value = url;
  pdfModalVisible.value = true;
};
</script>

<template>
  <div id="main-container">
    <!-- 表头 -->
    <head-components />

    <el-container class="container">
      <el-main>
        <!-- 主界面 -->
        <div id="dashboard">
          <!-- 轮播图 -->
          <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="(img, index) in carouselImages" :key="index">
              <img :src="img.src" :alt="`slide-${index}`" style="width: 100%; height: 100%; object-fit: cover;" />
            </el-carousel-item>
          </el-carousel>

          <!-- 功能卡片网格 -->
          <div class="dashboard-grid">
            <router-link to="/translation" class="card feature-card">
              <div class="icon-box">
                <i class="fas fa-language"></i>
              </div>
              <h3>智能翻译</h3>
              <span class="small-text">ꓧꓶꓽ ꓥꓳꓽ ꓡꓲ-ꓢꓴ ꓥꓳꓽ ꓒꓳꓹ ꓔꓶꓸ</span>
              <p>专业医疗文本实时翻译</p>
              <span class="small-text">ꓠ ꓫꓹ ꓕꓳꓽ ꓶꓽ ꓒꓳꓹ ꓔꓶꓸ</span>
            </router-link>

            <router-link to="/terminology" class="card feature-card">
              <div class="icon-box">
                <i class="fas fa-book-medical"></i>
              </div>
              <h3>术语词典</h3>
              <span class="small-text">ꓠ ꓟꓲ ꓠꓯ ꓞꓲꓼ ꓟꓲ ꓠꓹ ꓔꓶꓸ</span>
              <p>常用医疗术语对照查询</p>
              <span class="small-text">ꓠ ꓫꓵꓽ ꓠ ꓙꓲ ꓜꓽ ꓕꓳꓽ ꓶꓽ ꓠꓹ ꓔꓶꓸ</span>
            </router-link>

            <router-link to="/history" class="card feature-card">
              <div class="icon-box">
                <i class="fas fa-history"></i>
              </div>
              <h3>搜索记录</h3>
              <span class="small-text">ꓠꓹ ꓖꓴ ꓟ ꓮ ꓙꓲ ꓕꓲ ꓗꓪ ꓙꓪ</span>
              <p>查看历史翻译记录</p>
              <span class="small-text">ꓟꓶꓸ ꓕꓯꓽ ꓒꓳꓹ ꓖꓴ ꓟ ꓕꓲꓸ ꓗꓪ ꓙꓪꓸ</span>
            </router-link>

            <router-link to="/navigation" class="card feature-card">
              <div class="icon-box">
                <i class="fas fa-map-marker-alt"></i>
              </div>
              <h3>辅助导航</h3>
              <span class="small-text">ꓣꓱꓽ ꓟꓽ ꓗꓴꓸ ꓠꓬ ꓕꓲ ꓗꓪ ꓠꓬꓲ</span>
              <p>智能就医指导</p>
              <span class="small-text">ꓠ ꓫꓹ ꓓꓴ ꓬꓲ ꓙ ꓔꓶ</span>
            </router-link>

            <router-link to="/lacquer-tree" class="card feature-card">
              <div class="icon-box">
                <i class="fas fa-leaf"></i>
              </div>
              <h3>傈僳语特色医疗</h3>
              <span class="small-text">waiting</span>
              <p>傈僳族传统医疗文化与知识</p>
              <span class="small-text">waiting</span>
            </router-link>
          </div>
        </div>

        <!-- PDF 查看器模态框 -->
        <el-dialog v-model="pdfModalVisible" title="傈僳族医药研究文献" width="80%">
          <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 600px;"></iframe>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<style >

  @import '@/assets/base.css';
  .container {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
  }

</style>

<style scoped>.container {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* 轮播图样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.dashboard-grid > :nth-child(4) {
  grid-column-start: 1;
}

/* 第五张卡片靠右 */
.dashboard-grid > :nth-child(5) {
  grid-column-start: 2;
}

.card.feature-card {
  text-decoration: none;
  color: black;
  display: block;
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

.card.feature-card:hover {
  opacity: 0.9;
}

.icon-box {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
</style>